<template>
    <div class="text_list_box">
        <el-table :data="data" height="350" tooltip-effect="light" header-row-class-name="table_header_title">
            <el-table-column width="60px" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-checkbox v-model="scope.row.isCheck" @change="changeMaterial(scope.row)"></el-checkbox>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="页面名称" align="'center'">
                <template #default="scope">
                    <div class="line3">{{ scope.row.page_name || '--' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="页面编号" align="'center'">
                <template #default="scope">
                    <div class="line3">{{ scope.row.external_page_id || '--' }}</div>
                </template>
            </el-table-column>

            <template #empty>
                <Empty />
            </template>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import Empty from '../components/Empty.vue';
import { ref, reactive, watch, computed, onMounted, withDefaults } from 'vue';
import { ElMessage } from 'element-plus';

interface Props {
    /** 选中数据 */
    modelValue: Array<any>;
    /** table数据 */
    data: Array<any>;
    /** 是否多选 */
    multiple?: boolean;
    /** 选中素材总数 */
    selectTotalNum: number;
    /** 剩余可选中数量 */
    remainNum: number;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    data: () => [],
    remainNum: 1,
    multiple: true,
    selectTotalNum: 9
});

const emit = defineEmits(['update:modelValue']);

const selectList = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

/**
 * 选中/取消
 * @param item
 */
const changeMaterial = (item: any) => {
    const index = selectList.value.findIndex(el => el.id == item.id);

    if (props.remainNum <= 0 && index == -1) {
        ElMessage.error(`最多可选${props.selectTotalNum}个素材`);
        return;
    }
    if (props.multiple) {
        if (index == -1) {
            selectList.value.push({ ...item, sortTime: +new Date() });
        } else {
            selectList.value.splice(index, 1);
        }
    } else {
        selectList.value.splice(0);
        selectList.value.push({ ...item, sortTime: +new Date() });
    }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.text_list_box {
    width: 100%;

    .line3 {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-break: break-all;
    }
}
</style>
<style lang="scss">
.text_list_box {
    .el-table--scrollable-y ::-webkit-scrollbar {
        display: none;
    }

    .table_header_title {
        th.el-table__cell {
            background: #f9f9f9;
            padding: 10px 0;
        }
    }
}
</style>
